<template>
  <div class="loading-box on-top w-full h-full z-1001 bg-cover bg-black">
    <div v-show="!['beforeStart'].includes(ttsa?.process)">
      <div v-show="process === 'error'" class="error-pos cursor-pointer z-11 absolute bottom-35px w-520px h-90px"
        @click="reset">
        <img v-show="false" src="@/assets/images/pc/reconnect.png" alt="">
        <img v-show="false" src="@/assets/images/pc/reconnect-hover.png" alt="">
        <div class="relative w-full h-full reconnect">
        </div>
      </div>
      <div v-show="process !== 'error'" class="loading-bar absolute bottom-0px w-full left-0 z-10 px-50px">
        <div class="text-50px text-right text-white font-bold mb-20px">{{ percentage }}%</div>
        <div class="flex justify-between items-end">
          <div class="overflow-hidden flex-1">
            <div class="text-black text-12px font-bold mb-10px">LOADING...</div>
            <div class="flex overflow-hidden" :style="{ 'width': `${percentage}%` }">
              <div v-for="item in ROUND_NUMBER" :key="item" class="flex">
                <div class="w-20px h-3px bg-white opacity-20 mr-2px"></div>
                <div class="w-3px h-3px bg-white mr-2px"></div>
                <div class="w-3px h-3px bg-white mr-2px opacity-20"></div>
                <div class="w-20px h-3px bg-white opacity-10 mr-2px"></div>
                <div class="w-9px h-3px bg-white mr-2px opacity-20"></div>
                <div class="w-20px h-3px bg-white mr-2px"></div>
                <div class="w-3px h-3px bg-white mr-2px opacity-20"></div>
                <div class="w-3px h-3px bg-white mr-2px"></div>
                <div class="w-20px h-3px bg-white opacity-10"></div>
                <div class="w-9px h-3px bg-white mr-2px"></div>
              </div>
            </div>
          </div>
          <div class="w-190px h-21px ml-20px" :class="{ highlight: percentage >= HIGH_LIGHT }">
            <!-- 图片位置 -->
            <img src="@/assets/icons/pc/loading-xmov.png" />
          </div>
        </div>
      </div>
    </div>
    <div v-show="['beforeStart'].includes(ttsa?.process)">
      <PureBtn class="z-1" @click="start">
        {{ guidance.text || '开启元宇宙之旅' }}
      </PureBtn>
    </div>
    <div class="w-full h-full relative">
      <video id="video" ref="videoRef" class="h-full w-full object-cover" src="@/assets/video/pc-loading.mp4"
        x5-playsinline="h5-page" x-webkit-airplay="allow" webkit-playsinline="true" playsinline="true" :controls="false"
        :auto-play="true" :loop="true" :muted="true" />
      <img src="@/assets/apng/loading-time.png" class="absolute w-full h-full object-cover top-0" />
    </div>
  </div>
</template>

<script
  lang="ts"
  setup
  name="LoadingPage"
>
import useLoading from './hook'
import { useConfigStore } from '@/store/config'
import { useTtsaStore } from '@/store/ttsa'
import { useTreeStore } from '@/store/tree'

const { process, swiper, percentage, reset } = useLoading(true)
const HIGH_LIGHT = 98 // 图片高亮值
// const DELAY_TIME = 3000
const ROUND_NUMBER = 10
const videoRef = ref(null)

// hooks
const ttsa = useTtsaStore();
const config = useConfigStore()
const tree = useTreeStore()

const guidance = config.guidance

const start = () => {
  tree.getMenuCatalogue()
  // start
  ttsa.start()
  videoRef.value.pause()

}

onMounted(() => {
  const videoPlay = videoRef.value.play();

  videoPlay.then(() => {
    // console.log('可以自动播放');
  }).catch((err) => {
    console.log(err);
    // console.log("不允许自动播放");

    //视频元素可以选择静音后再播放,提示用户打开声音
    videoRef.value.muted = true;
    videoRef.value.play();
  });
})
</script>

<style scoped lang="scss">
@keyframes scaleAnimation {
  0% {
    transform: scale(0.1);
    opacity: 0.0;
  }

  25% {
    transform: scale(0.3);
    opacity: 0.25;
  }

  50% {
    transform: scale(0.5);
    opacity: 0.5;
  }

  75% {
    transform: scale(0.8);
    opacity: 0.75;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.error-pos {
  margin-left: -243.5px;
  left: 50%;
  animation: scaleAnimation 0.5s ease-out;

  .reconnect {
    background: url('@/assets/images/pc/reconnect.png') no-repeat;
    background-size: contain;

    &:hover {
      background-image: url('@/assets/images/pc/reconnect-hover.png');
    }
  }
}

.highlight {
  -webkit-filter: brightness(500%);
  filter: brightness(500%);
}



.loading-bar-pc {
  @apply backdrop-filter backdrop-blur-2px px-40px absolute;
  background: rgba(255, 255, 255, 0.1);
  animation: scaleAnimation 0.5s ease-out;
  left: 50%;
  margin-left: -440px;
  // margin-top: -48px;
}

.loading-bar {

  height: 195px;
  padding-top: 62px;

  &::before {
    @apply absolute w-full h-full left-0;
    content: '';
    background: linear-gradient(180deg, rgba(103, 148, 183, 0) 0%, #526F82 100%);
    opacity: 0.38;
  }
}
</style>
